<template>
    <div>
        <div class="Top">
            <div class="size">货品信息</div>
            <el-form :inline="true" :model="formInline" :rules="rules" ref="formInline" class="demo-form-inline">
                <el-form-item label="货品名称" prop="name">
                    <el-input v-model="formInline.name" placeholder="请输入货品名称"></el-input>
                </el-form-item>
                <el-form-item label="货品编码" prop="number">
                    <el-input v-model="formInline.number" placeholder="请输入货品编码"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('formInline')">新增货品</el-button>
                </el-form-item>
            </el-form>
            <div class="size">增加货品</div>
            <el-form :inline="true" :model="form" ref="form" class="demo-form-inline">
                <el-form-item label="选择货品">
                    <el-select v-model="form.pId" placeholder="请选择货品">
                        <el-option v-for="item in options" :key="item.pId" :label="item.name" :value="item.pId"> </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="货品数量">
                    <el-input v-model="form.stock" placeholder="请输入货品数量"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit(form)">新增货品</el-button>
                </el-form-item>
            </el-form>
            <!-- 数据 -->
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column label="序号" width="60" type="index" :index="indexMethod"> </el-table-column>
            <el-table-column prop="product.number" label="货品编号" width="180"> </el-table-column>
            <el-table-column prop="product.name" label="货品名称"> </el-table-column>
            <el-table-column prop="stock" label="数量"> </el-table-column>
            <el-table-column prop="product.code" label="条码"> </el-table-column>
            <el-table-column prop="product.brand" label="品牌"> </el-table-column>
            <el-table-column prop="product.spec" label="规格"> </el-table-column>
            <el-table-column prop="product.valid" label="保质期（天）"> </el-table-column>
            <el-table-column fixed="right" label="操作" width="100">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">修改</el-button>
                    <el-button type="text" size="small" @click="del(scope.row.infoId)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 修改 -->
        <el-dialog title="提示" :visible.sync="dialogFormVisible">
            <el-form :model="forme">
                <el-form-item label="请输入数量">
                    <el-input v-model="forme.stock" autocomplete="off"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="modify">确 定</el-button>
                <el-button @click="dialogFormVisible = false">取 消</el-button>
            </div>
        </el-dialog>
        <div class="block" v-show="hide">
            <el-pagination
                style="float: right"
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="paginations.pageNum"
                :page-sizes="[100, 200, 300, 400]"
                :page-size="paginations.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="total"
            >
            </el-pagination>
        </div>
    </div>
</template>

<script>
import { Goodsinformation, Goods, Additem, information, Modifygoods, Deleteitem } from '@/api/user';
export default {
    data() {
        return {
            // 分页显示隐藏
            hide: false,
            // 总条目数
            total: undefined,
            // 分页
            paginations: {
                // 当前页数
                pageNum: 1,
                // 显示几条
                pageSize: 10
            },
            // 弹窗
            dialogFormVisible: false,
            // 数据
            tableData: [],
            valld: 1,
            // 货品信息
            formInline: {
                name: undefined,
                number: undefined,
                combin: 1
            },
            rules: {
                name: [{ required: true, message: '请输入货品名称', trigger: 'blur' }],
                number: [{ required: true, message: '请输入货品编码', trigger: 'change' }]
            },
            // 新增货品
            form: {
                pId: null,
                pcId: undefined,
                stock: undefined
            },
            frome:{
                stock: undefined
            },
            Onepage: {
                pageNum: 1,
                pageSize: 50,
                pcId: undefined
            },
            // 新增货品选择框
            options: [],
            // 修改
            forme: {
                stock: ''
            }
        };
    },
    methods: {
        // 分页（多少个）
        handleSizeChange(val) {
            this.paginations.pageSize = Number(val);
            this.getData();
        },
        // 分页（页数）
        handleCurrentChange(val) {
            this.paginations.pageNum = Number(val);
            this.getData();
        },
        // 序号
        indexMethod(index) {
            return (this.Onepage.pageNum - 1) * this.Onepage.pageSize + index + 1;
        },
        // 删除
        del(infoId) {
            this.infoId = infoId;
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                    Deleteitem(this.infoId).then((ref) => {
                        this.informations();
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                    });
                })
                .catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
        },
        // 修改获取内容
        handleClick(val) {
            this.dialogFormVisible = true;
            this.forme.infoId = val.infoId;
            this.forme.stock = val.stock;
        },
        // 修改
        modify() {
            Modifygoods(this.forme).then((ref) => {
                this.dialogFormVisible = false;
                this.informations(this.Onepage);
            });
        },
        // 新增货品选择框
        goods() {
            Goods(this.Onepage).then((ref) => {
                // console.log(ref);
                this.options = ref.rows;
            });
        },
        // 货品信息
        submitForm(formInline) {
            this.$refs[formInline].validate((valid) => {
                if (valid) {
                    if (this.valld == 1) {
                        Goodsinformation(this.formInline).then((ref) => {
                            this.$message({
                                message: ref.msg,
                                type: 'success'
                            });

                            this.form.pcId = ref.pId;
                            this.Onepage.pcId = ref.pId;
                            this.goods();
                        });
                        this.valld = 2;
                    } else {
                        this.$message.error('操作失败!');
                    }
                } else {
                    return false;
                }
            });
        },
        //   货品信息
        informations() {
            information(this.Onepage).then((ref) => {
                console.log(ref);
                this.total = ref.total;
                this.tableData = ref.rows;
                this.hide = true;
            });
        },
        //   新增货品
        onSubmit(form) {
            if (this.form.pcId) {
                if(this.tableData == ''){
                    Additem(this.form).then((ref) => {
                            // console.log(ref);
                            this.informations();
                            this.$message({
                                message: ref.msg,
                                type: 'success'
                            });
                        });
                }else{
                    for (var i = 0; i < this.tableData.length; i++) {
                        if (this.form.pcId == this.tableData[i].pcId) {
                            this.$message({
                                message: '检测到重复商品，已自动增加相同商品数量',
                                type: 'success'
                            });
                            this.tableData[i].stock = Number(this.form.stock) + Number(this.tableData[i].stock)
                            this.frome.stock = this.tableData[i].stock
                            this.frome.infoId = this.tableData[i].infoId
                            Modifygoods(this.frome).then((ref) => {
                                console.log(ref);
                            });
                        } else {
                            Additem(this.form).then((ref) => {
                                console.log(ref);
                                this.informations();
                                this.$message({
                                    message: ref.msg,
                                    type: 'success'
                                });
                            });
                        }
                    }
                }
            } else {
                this.$message.error('请添加或选择货品!');
            }
        }
    },
    mounted() {
        // 新增货品选择框
        this.goods();
    }
};
</script>

<style lang="less" scoped>
.size {
    font-weight: 600;
}
.Top {
    margin: 15px;
}
/deep/.el-dialog{
width: 30% !important;
}
/deep/.el-form-item__label{
    font-weight: 700 !important;
}
</style>